﻿@{
    ViewBag.Title = "快速办卡";
    var banks = ViewBag.banks;
    var topics = ViewBag.topics;
    var tags = ViewBag.tags;
}
@section style{
    <link href="~/Content/css/wswd.css" rel="stylesheet" />
    <link href="~/Content/css/dropload.css" rel="stylesheet" />
}

<div class="wswd_wraper">

    <div class="fast_card">
        <ul class="fast_card_contain">
            <li>
                <a href="javascript:;" class="allback">全部银行</a>
                <!--全部银行选择-->
                <div class="back-list">
                    <ul class="back_box">
                        <li class="active">全部银行</li>
                        @if (banks.Count > 0) {
                            foreach (var bank in banks) {
                                <li id="@bank.id">@bank.name</li>
                            }
                        }
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="alltheme">全部主题</a>
                <!--全部主题选择-->
                <div class="theme-list ">
                    <ul class="theme_box ">
                        <li class="active">全部主题</li>
                        @if (topics.Count > 0) {
                            foreach (var topic in topics) {
                                <li id="@topic.id">@topic.name</li>
                            }
                        }
                    </ul>
                </div>


            </li>
            <li>
                <a href="javascript:;" class="mr80 allmore">更多</a>
                <!--更多-->
                <div class="more-list">
                    @if (tags.Count > 0) {
                        foreach (var tag in tags) {
                            <div class="m_box" style="clear: both;">
                                <h1 class="more-tit">@tag.name</h1>
                                <ul class="more-box-li">
                                    @if (tag.tagList.Count > 0) {
                                        foreach (var list in tag.tagList) {
                                            <li id="@list.id">@list.name</li>
                                        }
                                    }
                                </ul>
                            </div>
                        }
                    }
                    <button class="okbtns">确定</button>
                </div>
            </li>
        </ul>

        <ul class="groom_contain" id="groom_contain">
            @*@if (Model.rows.Count > 0) {
                    foreach (var row in Model.rows) {
                     <li>
                        <div class="groom_left">
                            <img src="@row.imgUrlPath" class="groom_pic">
                        </div>
                        <div class="groom_rg">
                             <h1 class="groom_name">@row.name</h1>
                             <p class="groom_txt">@row.description</p>
                             <a href="/h5/card/proposer_info" class="apply_btn">立即申请</a>
                        </div>
                </li>
                    }
                }*@
        </ul>
        <a href="/card/CardProgress" class="apply_now fix_apply">进度查询</a>
    </div>
</div>
<!--遮罩层-->
<div class="s_bg"></div>
@section scripts{
    <script src="~/Scripts/dropload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".fast_card_contain li a").on("click", function () {
                $(this).addClass('active').siblings().removeClass('active');
            })
            //银行列表
            $(".allback").on("click", function () {
                watch(this);
                $(this).parent().parent().find('li > a').removeClass('active');
                $(this).addClass('active');
                var obj = $(this).parent().find(".back-list");
                if (obj.attr('top') == '10%') {
                    obj.attr('top', '-100%');
                    obj.animate({
                        top: '-100%'
                    })
                    $(this).removeClass('active');
                } else {
                    back(this);
                }
                $(".s_bg").show();
            })
            //主题列表
            $(".alltheme").on("click", function () {
                watch(this);
                $(this).parent().parent().find('li > a').removeClass('active');
                $(this).addClass('active');
                var obj = $(this).parent().find(".theme-list");
                if (obj.attr('top') == '10%') {
                    obj.attr('top', '-100%');
                    obj.animate({
                        top: '-100%'
                    })
                    $(this).removeClass('active');
                } else {
                    theme(this);
                }
                $(".s_bg").show();
            })

            //更多
            $(".allmore").on("click", function () {
                watch(this);
                $(this).parent().parent().find('li > a').removeClass('active');
                $(this).addClass('active');
                var obj = $(this).parent().find(".more-list");
                if (obj.attr('top') == '10%') {
                    obj.attr('top', '-100%');
                    obj.animate({
                        top: '-100%'
                    })
                    $(this).removeClass('active');
                } else {
                    more(this);
                }
                $(".s_bg").show();
            })
        })


        //下拉列表
        var query = { current: 1, size: 10, bankIds: [], topicIds: [], tagIds: [] };
        var dropload = $('#groom_contain').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                $.ajax({
                    url: '/card/_FastCard', type: "post", data: query,
                    success: function (response) {
                        var paged = $(response).siblings("page");
                        if (paged.length == 1) {
                            query.result += Number.parseInt(paged.attr("rows"));
                            $('#groom_contain').append($(response));
                            $('#groom_contain page').remove();
                            query.current++;
                        } else {
                            me.lock();
                            me.noData();
                        }
                        me.resetload();
                    },
                    error: function (xhr, type) {
                        me.lock();
                        me.noData();
                        me.resetload();
                    }
                });
            }
        });

        //列表条件筛选
        function choose() {
            query.current = 1;
            $("#groom_contain").children("li").remove();
            $('.dropload-down').remove();
            dropload.init({
                scrollArea: window,
                loadDownFn: function (me) {
                    $.ajax({
                        url: '/card/_FastCard', type: "post", data: query,
                        success: function (response) {
                            var paged = $(response).siblings("page");
                            if (paged.length == 1) {
                                query.result += Number.parseInt(paged.attr("rows"));
                                $('#groom_contain').append($(response));
                                $('#groom_contain page').remove();
                                query.current++;
                                me.unlock();
                                me.noData(false);
                            } else {
                                me.lock();
                                me.noData();
                            }
                            me.resetload();
                            $(".assBg").hide();
                            $(".allList").hide();
                        },
                        error: function (xhr, type) {
                            me.lock();
                            me.noData();
                            me.resetload();
                        }
                    });
                }
            });
        }

        function back($this) {
            var obj = $($this).parent().find(".back-list");
            obj.attr('top', '10%');
            obj.animate({
                top: '10%'
            })

        }
        $(".back_box li").click(function () {
            $(".back-list").attr('top', '-100%');
            $(".back-list").stop().animate({
                top: '-100%'
            });
            $(".s_bg").hide();
            $(this).addClass('active').siblings().removeClass('active');
            $(".allback").text($(this).text().substring(0, 4) + '...');
            $(this).parent().parent().parent().find('a').removeClass('active');
            query.bankIds = [];
            if ($(this)[0].id != "")
                query.bankIds.push($(this)[0].id);
            choose();
        });

        $(".more-box-li li").click(function () {
            $(".more-box-li").attr('top', '-100%');
            $(".more-box-li").stop().animate({
                top: '-100%'
            })
            $(".s_bg").hide();
            $(this).toggleClass('actives');
            $(".allmore").text($(this).text().substring(0, 4) + '...');
            $(this).parent().parent().parent().find('a').removeClass('actives');
            query.tagIds.push($(this)[0].id);
        });

        $(".theme_box li").click(function () {
            $(".theme-list").attr('top', '-100%');
            $(".theme-list").stop().animate({
                top: '-100%'
            })
            $(".s_bg").hide();
            $(this).addClass('active').siblings().removeClass('active');
            $(".alltheme").text($(this).text().substring(0, 4) + '...');
            $(this).parent().parent().parent().find('a').removeClass('active');
            query.topicIds = [];
            if ($(this)[0].id != "")
                query.topicIds.push($(this)[0].id);
            choose();
        });

        /**
* 更多选择确认
**/
        $(".okbtns").on("click", function () {
            $(".more-list").attr('top', '-100%');
            $(".more-list").stop().animate({
                top: '-100%'
            });
            choose();
            $(".s_bg").hide();
        });


        function theme($this) {
            var obj = $($this).parent().find(".theme-list");
            obj.attr('top', '10%');
            obj.animate({
                top: '10%'
            })
        }

        function more($this) {
            var obj = $($this).parent().find(".more-list");
            obj.attr('top', '10%');
            obj.animate({
                top: '10%'
            });
        }

        /**
* 监控
*/
        function watch($this) {
            $(".fast_card_contain ul li a").removeClass('active');
            $($this).addClass('active');
            var currentDivListObj = $($this).parent().find('> div'); //当前div
            if (!currentDivListObj.hasClass('back-list')) {
                $(".back-list").attr('top', '-100%');
                $(".back-list").stop().animate({
                    top: '-100%'
                });
            }
            if (!currentDivListObj.hasClass('more-list')) {
                $(".more-list").attr('top', '-100%');
                $(".more-list").stop().animate({
                    top: '-100%'
                });
            }
            if (!currentDivListObj.hasClass('theme-list')) {
                $(".theme-list").attr('top', '-100%');
                $(".theme-list").stop().animate({
                    top: '-100%'
                });
            }
        }
    </script>
}
